import {defineComponent, nextTick, reactive, ref} from "vue";
import style from "@/page/portal/mine/comp/css/collect.module.css";
import style1 from "./css/index.module.css"
import {CategoriesStore} from "@/stores/categories";
import {storeToRefs} from "pinia";
import {useRouter} from "vue-router";
import {formatDateTime} from "@/utils/utils";
import {CollectStore} from "@/stores/collect";
import {ElMessage} from "element-plus";
import Comment from "@/page/portal/category/Comment";
import {userStore} from "@/stores/user";
import Dialog from "@/page/portal/category/Details/comp/Dialog";
import {OrdersStore} from "@/stores/orders";
import { ElLoading } from 'element-plus'
export default defineComponent({
    setup() {
        const categories_store = CategoriesStore()
        const collect_store =  CollectStore()
        const user_store = userStore()
        const order_store = OrdersStore()

        const {ordersInfo} = storeToRefs(order_store)
        const {categoriesInfo}  = storeToRefs(categories_store)
        const {collectInfo} = storeToRefs(collect_store)
        const {userInfo} = storeToRefs(user_store)

        const visible = ref(false)
        const loadding = ref(false)
        const router = useRouter()

        const id = router.currentRoute.value.query.id
        const isPay = router.currentRoute.value.query.isPay

        const state = reactive({
            out_trade_no:router.currentRoute.value.query.out_trade_no,
            trade_no:router.currentRoute.value.query.trade_no,
            money:router.currentRoute.value.query.total_amount,
        })
        categories_store.getCategoriesInfo(id)

        const handleLove = async () => {
            const code = await categories_store.updateInformationRecord(id, 'love')
            if (code === 0) {
                categories_store.getCategoriesInfo(id)
                return ElMessage.success("点赞成功！")
            }
        }

        // 点击收藏
        const handleCollect = async () => {

            if(categoriesInfo.value.isCollect){
                const res = await collect_store.deleteCollect(categoriesInfo.value.isCollect.id)
                ElMessage.success("取消成功！")
            }else{
                collectInfo.value.cat_id = id
                const res = await collect_store.addCollect()
                if(res) ElMessage.success("收藏成功！")
            }
            categories_store.getCategoriesInfo(id)
        }

        // 点击支持
        const handleSupport = async () => {
            ordersInfo.value.cat_id = id
            const {result} = await order_store.addOrders()
            window.open(result, '_self')

        }

        const checkPay = async () => {
            const loadingInstance = ElLoading.service({ fullscreen: true })
            const res = await order_store.checkPay({...state,cat_id:id})
            if(res.code === 0){
                ElMessage.success("支付成功！")
                router.push({name: 'categoryDetails', query: {id}})
            }else{
                ElMessage.warning("支付失败！")
            }
            categories_store.getCategoriesInfo(id)
            await nextTick(() => {
                loadingInstance.close()
            })
        }

        if(isPay){
            checkPay()
        }

        return () => {
            const is_admin = userInfo.value?.is_admin
            return <>
                <div className={style1.container}>
                    <div className={style.title}>
                        <p>众筹项目/详情</p>
                        {
                            userInfo.value.is_admin ?  <el-button type="primary" onClick={() => router.go(-1)}>返回</el-button> : ''
                        }
                    </div>
                    <div className={style1.content}>
                        <div className={style1.img}>
                            <el-image style={{
                                width:'100%',
                                height:'100%',
                            }} src={categoriesInfo.value.imgUrl} fit={'cover'} />
                        </div>
                        <div className={style1.information}>
                            <p>项目名称:{categoriesInfo.value.title}</p>
                            <p>项目类别:{categoriesInfo.value.type_info?.type_name}</p>
                            <p>期望金额:{categoriesInfo.value.expected_amount}元</p>
                            <p>众筹金额:{categoriesInfo.value.amount_raised}元</p>
                            <p>截止日期:{formatDateTime(categoriesInfo.value.end_time)}</p>
                            <p>发起人:{categoriesInfo.value.user_info?.nick_name}</p>
                            <p>浏览量:{categoriesInfo.value.record_info?.view}</p>
                            <p>点赞量:{categoriesInfo.value.record_info?.love}</p>
                            {
                                is_admin ? <div></div> : <div className={style1.btns}>
                                    {
                                        categoriesInfo.value.isCollect ? <div className={style1.btn_active} onClick={handleCollect}>已收藏</div> : <div className={style1.btn} onClick={handleCollect}>收藏</div>
                                    }
                                    <div className={style1.btn} onClick = {handleLove}>点赞</div>
                                    <div className={style1.btn} onClick = {()=>{visible.value = true}}>支持</div>
                                </div>

                            }

                        </div>

                    </div>
                    <div className={style1.describe}>
                        <div className={style.title} style={{marginBottom:'20px'}}>项目描述</div>
                        <div v-html={categoriesInfo.value.describe}></div>
                    </div>
                    {
                        is_admin ? <div></div> :
                            <Comment
                                cat_id={id}
                            />
                    }

                    <Dialog
                        diaForm={ordersInfo.value}
                        handleSupport={handleSupport}
                        visible={visible}
                    />


                </div>
            </>
        }
    }
})